import React, { useEffect, useState } from 'react'
import Uply from '../../Compution/Uply'
import { NavBar, Card, IndexBar, List, Tag, SearchBar, Toast } from 'antd-mobile'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
import axios from 'axios'
import styles from './city.module.css'
import { DeleteOutline } from 'antd-mobile-icons'
import useDebounce from '../../hook/useDebounce'
// import Jg from '../../Compution/Jg'
function Index() {
    const navigate = useNavigate()
    const { type } = useParams()
    const [rm, setrm] = useState([])
    const [sy, setSy] = useState([])
    const xuanRan = async () => {
        const res = await axios.get('/api/city')
        console.log(res)
        const { code, data } = res.data
        if (code == 200) {
            setrm(data.hotCities)
            setSy(data.city)
        }
    }
    useEffect(() => {
        xuanRan()
    }, [])
    const [ss, setss] = useState([])
    const [hilist, sethilist] = useState(JSON.parse(localStorage.getItem('hilist')) || [])
    const sous = useDebounce(async (wd) => {
        if (wd == '') {
            Toast.show('请输入内容')
            setss([])
        }
        else {
            const res = await axios.get('/api/city/search', { params: { wd } })
            console.log(res)
            const { code, data, message } = res.data
            if (code == 200) {
                setss(data)
                Toast.show(message)
            }
            else {
                Toast.show(message)
            }

           const index = hilist.indexOf(wd)
            if(index>-1)
            {
                hilist.splice(index,1)
            }
            hilist.unshift(wd)
            sethilist(hilist)
            localStorage.setItem('hilist',JSON.stringify(hilist))
        }
         
    },1000)
    const dj = () => {
        sethilist([])
          localStorage.setItem('hilist', JSON.stringify([]))
    }
    return (
        <div>
            <NavBar onBack={() => navigate('/')}>
                <SearchBar placeholder='请输入内容'
                    onChange={(wd) => sous(wd)}
                />
            </NavBar>

            {
                ss.length > 0 ? <div className={styles.hh}>
                    <List >
                        {
                            ss.map((item, index) => {
                                return <List.Item key={index}>{item.name}</List.Item>
                            })

                        }
                    </List>
                </div> : ''
            }
            <Card title='历史记录' extra={<DeleteOutline onClick={()=>dj()} />}>
                  {
                     hilist.map((item,index)=>{
                         return <Tag key={index}>{ item}</Tag>
                     })
               }
         </Card>

            <Card title={<div>当前城市: <span>{rm.length > 0 && rm[0].name}</span></div>} >

            </Card>
            <Card title='热门城市' >
                {
                    rm.length > 0 && rm.map((item, index) => {
                        return <Tag key={index}>
                            {item.name}
                        </Tag>
                    })
                }
            </Card>

            <div style={{ height: window.innerHeight }}>
                <IndexBar>
                    {sy.length > 0 && sy.map(item => {

                        return (
                            <IndexBar.Panel
                                index={item.initial}
                                title={`标题${item.initial}`}
                                key={`标题${item.initial}`}
                            >
                                <List>
                                    {item.list.map((item, index) => (
                                        <List.Item key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}

export default Uply(Index)
